{% extends "base.html" %}
{% load static sekizai_tags tutorial_tags %}

{% block addtoblock %}
	{{ block.super }}
	{% addtoblock "js" %}<script src="{% static 'js/djng-forms.js' %}" type="text/javascript"></script>{% endaddtoblock %}
	{% add_data "ng-requires" "djng.forms" %}
{% endblock %}

{% block main-content %}

	{% block main-intro %}
	<h1>Django's Form Submission</h1>
	<p class="lead">Classic Form Submission in an AngularJS context</p>
	<p>This example shows how to use a classic Django Form inside an AngularJS application.</p>
	{% endblock main-intro %}

	<hr />

	<form {% block form_tag %}name="{{ form.form_name }}" method="post" action="." validate{% endblock %}>
		{% csrf_token %}
		<div class="row">
			<div class="col-md-12">
				{{ form.as_div }}
			</div>
		</div>
		<div class="row" style="margin-bottom: 20px;">
			<div class="col-md-12">
				{% block form_submission %}
				<button type="submit" class="btn btn-primary">Subscribe Me</button>
				{% endblock %}
			</div>
		</div>
		<div class="row">
			<div class="col-md-12">
				{% block form_foot %}{% endblock %}
			</div>
		</div>
	</form>

	<hr />

	<div class="djng-tutorial" ng-controller="TutorialCtrl">
	<h3>How does it work?</h3>

	{% block main-tutorial %}
	<p>By inheriting from the mixin class <code>Bootstrap3FormMixin</code>, Django renders the form in
	a way, compatible with Twitter Bootstrap. Here the correct CSS classes are added to the
	<code>&lt;input&gt;</code> elements, which are embedded inside
	<code>&lt;div class="form-group"&gt;</code> containers. If you omit <code>Bootstrap3FormMixin</code>,
	then the Form is rendered, as Django would by default.</p>
	<p>When this form is rejected by the server, the list of errors is rendered using AngularJS's built
	in <a href="https://docs.angularjs.org/api/ng/directive/form">Form Controller</a> using the
	directive <code>ng-show="<em>formname.fieldname</em>.$pristine"</code>. This in contrast to Django's
	internal behavior has the advantage, that the field's error message disappears as soon as the
	user starts typing.</p>
	<p>Passwords can, for obvious reasons only be validated by the server. Here for demonstration
	purpose, this is performed by the password field itself, but don't do this in a productive
	environment!</p>

	<p ng-init="tabList=['Form', 'View', 'HTML']"></p>
	{% endblock main-tutorial %}

	<ul class="nav nav-tabs" role="tablist">
		<li ng-repeat="tab in tabList" ng-class="tabClass(tab)">
			<a ng-click="setTab(tab)" ng-bind="tab"></a>
		</li>
	</ul>

	{% block main-sample-code %}
	{% autoescape off %}
	<div ng-show="activeTab==='Form'">{% pygments "forms/subscribe_form.py" %}</div>
	<div ng-show="activeTab==='View'">{% pygments "views/classic_subscribe.py" %}</div>
	<div ng-show="activeTab==='HTML'">{% pygments "tutorial/subscribe-form.html" %}</div>
	{% endautoescape %}
	<p class="bg-info">Use this setting, if you want your forms behave the way intended by Django.
	Here the only exception is, that errors from a previous and failed form validation disappear, as
	soon as the user changes that field.<br/>In this setting, AngularJS adds a dummy
	<code>ng-model</code> attribute to each input field.</p>
	{% endblock main-sample-code %}

	</div>

{% endblock main-content %}
